<template>
  <div class="footer-wrapper page-wrapper">
    <div class="container">
      <div class="school-info">
        <img :src="require('../assets/tju-computer.png')" style="height: 60px;margin-bottom: 5px" />
        <br />
        <span
          v-if="$store.state.language === 'zh-CN'"
          style="color: white; padding-left: 5px"
        >联系地址：天津市海河教育园区雅观路135号 天津大学55楼</span>
        <span
          v-else
          style="color: white; padding-left: 5px"
        >Address: No. 135, Yaguan Road, Haihe Education Park, Tianjin, 55 Teaching Building, TJU</span>
      </div>
      <div class="conference-info">
        <div class="link-wrapper">
          <div class="link-instance">
            <a
              href="https://infocom2020.ieee-infocom.org/"
              target="_blank"
            >INFOCOMM</a>
          </div>
          <div class="link-instance">
            <a
              href="https://globecom2020.ieee-globecom.org/"
              target="_blank"
            >GLOBECOM</a>
          </div>
          <div class="link-instance">
            <a
              href="https://ieee-smartiot.org/"
              target="_blank"
            >SMARTIOT</a>
          </div>
        </div>
      </div>
      <div class="link-info" :class="{en: $store.state.language === 'en-US'}">
        <!-- <div style="color: white; font-size: 18px">友情链接</div> -->
        <div class="link-wrapper">
          <div class="link-instance">
            <a
              href="https://www.tsinghua.edu.cn"
              target="_blank"
            >{{ $store.state.language === 'zh-CN' ? '清华大学' : 'THU'}}</a>
          </div>
          <div class="link-instance">
            <a
              href="https://www.pku.edu.cn/"
              target="_blank"
            >{{ $store.state.language === 'zh-CN' ? '北京大学' : 'PKU'}}</a>
          </div>
          <div class="link-instance">
            <a
              href="http://www.tju.edu.cn/"
              target="_blank"
            >{{ $store.state.language === 'zh-CN' ? '天津大学' : 'TJU'}}</a>
          </div>
          <div class="link-instance">
            <a
              href="https://www.cmu.edu/"
              target="_blank"
            >{{ $store.state.language === 'zh-CN' ? '卡耐基梅隆大学' : 'CMU'}}</a>
          </div>
          <div class="link-instance">
            <a
              href="http://www.mit.edu/"
              target="_blank"
            >{{ $store.state.language === 'zh-CN' ? '麻省理工学院' : 'MIT'}}</a>
          </div>
          <div class="link-instance">
            <a
              href="https://www.stanford.edu/"
              target="_blank"
            >{{ $store.state.language === 'zh-CN' ? '斯坦福大学' : 'SU'}}</a>
          </div>
          <div class="link-instance">
            <a href="https://www.ieee.org/" target="_blank">IEEE</a>
          </div>
          <div class="link-instance">
            <a href="https://www.acm.org/" target="_blank">ACM</a>
          </div>
          <div class="link-instance">
            <a href="https://www.ccf.org.cn/" target="_blank">CCF</a>
          </div>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="copyright-web">
        <span>All rights reserved @Tie Qiu, 2019</span>
        <span class="count" v-if="$store.state.language == 'zh-CN'">
          <i class="el-icon-data-analysis" />
          您是第
          <strong>{{accessCount}}</strong> 位访客
        </span>
        <span class="count" v-else>
          <i class="el-icon-data-analysis" />
          You are the
          <strong>{{accessCount}}</strong> visitor
        </span>
        <span>
          <i class="el-icon-s-comment"></i>
          qiutie@ieee.org
        </span>
        <span>
          <i class="el-icon-phone"></i>
          +86-22-85356782
        </span>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import $api from "../api";

@Component
export default class Menu extends Vue {
  private accessCount: number | string = "加载中";

  mounted() {
    this.getAccessCount();
    if (!this.$store.state.hasAccess) {
      this.addAccessCount();
    }
  }

  getAccessCount() {
    $api.students.findAccessCount().then(res => {
      if ((res as any).length > 0) {
        this.accessCount = (res as any)[0].amount;
      }
    });
  }

  addAccessCount() {
    $api.students
      .addAccessCount()
      .then(res => {
        //do nothing
      })
      .catch(error => {
        console.log(error);
      });
  }
}
</script>
<style lang="scss" scoped>
.footer-wrapper {
  padding: 0 30px;
  padding-bottom: 0;
  .container {
    background: #113f6c;
    padding: 20px 30px;
    box-sizing: border-box;
    width: 1200px;
    margin: auto;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    &:last-child {
      padding-top: 0;
    }
  }
  .link-info, .conference-info {
    padding-left: 30px;
    border-left: 1px solid gray;
    &.en{
      width: 250px;
    }
  }
  .conference-info {
    width: 100px;
  }
  .link-info {
    width: 400px;
  }
  .link-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    // border-bottom: 1px solid gray;
    .link-instance {
      width: 33%;
      color: ghostwhite;
      margin-top: 12px;
      cursor: pointer;
      text-decoration: underline;
      line-height: 16px;
      a {
        color: white;
        text-decoration: none;
      }
      &:hover {
        a {
          color: #f5ae54;
        }
      }
    }
  }
  .conference-info {
    .link-instance{
      width: 100%;
    }
  }
  .copyright-web {
    width: 100%;
    padding-top: 15px;
    border-top: 1px solid gray;
    span {
      color: gainsboro;
      margin-right: 15px;
      &:nth-child(2n + 1) {
        color: ghostwhite;
      }
    }
    .count {
      strong {
        color: #f5ae54;
      }
    }
  }
}
// @media screen and (max-width: 1200px) {
//   .footer-wrapper {
//     .container {
//       width: 980px;
//     }
//   }
// }
// @media screen and (max-width: 980px) {
//   .footer-wrapper {
//     font-size: 13px;
//     .container {
//       width: 100%;
//     }
//     .copyright-web {
//       .count {
//         display: block;
//         margin-top: 10px;
//       }
//     }
//   }
// }
</style>